import { Meta } from '@storybook/blocks';
import YouTubeVideoPlayer from '@/components/YouTubeVideoPlayer';
import * as ListTileStories from '../stories/ListTile.stories';

<Meta of={ListTileStories} />

# ListTile

A single fixed-height row that typically contains some text as well as a leading or trailing icon.

<YouTubeVideoPlayer videoId="l8dj0yPBvgQ" />

## Example

```dart liveslice=ListTile height=500px
ListView(
  children: const <Widget>[
    Card(child: ListTile(title: Text('One-line ListTile'))),
    Card(
      child: ListTile(
        leading: FlutterLogo(),
        title: Text('One-line with leading widget'),
      ),
    ),
    Card(
      child: ListTile(
        title: Text('One-line with trailing widget'),
        trailing: Icon(Icons.more_vert),
      ),
    ),
    Card(
      child: ListTile(
        leading: FlutterLogo(),
        title: Text('One-line with both widgets'),
        trailing: Icon(Icons.more_vert),
      ),
    ),
    Card(
      child: ListTile(
        title: Text('One-line dense ListTile'),
        dense: true,
      ),
    ),
    Card(
      child: ListTile(
        leading: FlutterLogo(size: 56.0),
        title: Text('Two-line ListTile'),
        subtitle: Text('Here is a second line'),
        trailing: Icon(Icons.more_vert),
      ),
    ),
    Card(
      child: ListTile(
        leading: FlutterLogo(size: 72.0),
        title: Text('Three-line ListTile'),
        subtitle: Text(
          'A sufficiently long subtitle warrants three lines.'
        ),
        trailing: Icon(Icons.more_vert),
        isThreeLine: true,
      ),
    ),
  ],
)
```

## Related Links

- https://api.flutter.dev/flutter/material/ListTile-class.html
- https://youtu.be/l8dj0yPBvgQ
